<!DOCTYPE html>
<html>
<body>
<script crossorigin src="react.development.js"></script>
<script crossorigin src="react-dom.development.js"></script>
<script src="unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root">

</div>
</body>
<script type="text/babel">

    let title = 'hello world'
    function handleFn(){
        // 1 修改数据
        title = '你好，丁鹿'
        // 2 重新渲染
        rander()
    }
    function rander(){
        root.render((
            <div>
                <h1>{title}</h1>
                <div onClick={handleFn}>修改标题</div>
            </div>
        ))
    }
    const root = ReactDOM.createRoot(document.querySelector('#root'))
    rander()
</script>
</html>